import React from 'react';
import { Carousel } from 'antd';

export interface Slide {
  image: string;
  title: string;
  subtitle: string;
}

export interface Props {
  slides: Slide[];
}

const contentStyle: React.CSSProperties = {
    position: 'relative',
    width: '100%',
    height: '0',
    paddingBottom: '56.25%', // 16:9 宽高比，响应式高度
    color: '#fff',
    textAlign: 'center',
    background: '#000',
    overflow: 'hidden',
};
  
const imgStyle: React.CSSProperties = {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    objectFit: 'cover',
};
  
const overlayStyle: React.CSSProperties = {
    position: 'absolute',
    bottom: '30px',
    left: '50%',
    transform: 'translateX(-50%)',
    color: '#fff',
    textShadow: '0 0 10px rgba(0,0,0,0.7)',
    width: '90%',
    maxWidth: '600px',
    padding: '0 20px',
};
  
const titleStyle: React.CSSProperties = {
    fontSize: '2vw', // 响应式字体大小
    fontWeight: 'bold',
    marginBottom: '8px',
};
  
const subtitleStyle: React.CSSProperties = {
    fontSize: '1.2vw',
    opacity: 0.85,
};
  
const PicCarousel: React.FC<Props> = ({ slides }) => {
    return (
      <Carousel autoplay>
        {slides.map(({ image, title, subtitle }, index) => (
          <div key={index}>
            <div style={contentStyle}>
              <img
                src={image}
                alt={title}
                style={imgStyle}
              />
              <div style={overlayStyle}>
                <div style={titleStyle}>{title}</div>
                <div style={subtitleStyle}>{subtitle}</div>
              </div>
            </div>
          </div>
        ))}
      </Carousel>
    );
};

export default PicCarousel;